/*
Keyframe mixin
=============================================
The mixins provides you a cross-browser compatible method to set a keyframe.

Please refer to <http://caniuse.com/#search=keyframe> to see the browser support table of the feature.

######Example:
`.keyframes([name-value], [frames-value]);`

`@param: {String} name: The keyframe animation name`<br/>
`@param: {String} roules: the animation frames`
*/

.keyframes(@name, @roules) {
    @-webkit-keyframes @name {
        @roules();
    }
    @-moz-keyframes @name {
        @roules();
    }
    @keyframes @name {
        @roules();
    }
}

@keyframe--spin: {
    from {
        .rotate(0);
    }
    to {
        .rotate(360deg);
    }
};

@keyframe--spin-reverse: {
    from {
        .rotate(360deg);
    }
    to {
        .rotate(0);
    }
};

.keyframes(keyframe--spin, @keyframe--spin);

.keyframes(keyframe--spin-reverse, @keyframe--spin-reverse);